<script setup lang="ts">
import { ref } from 'vue'
import SvgFilters from '@components/SvgFilters.vue'
import Switch from '@components/Switch.vue'

// 开关状态
const basicSwitch = ref(false)
const withoutIcons = ref(true)
const smallSwitch = ref(false)
const largeSwitch = ref(true)
const disabledSwitch = ref(false)

// 动态配置
const customSize = ref('medium')
const showIcons = ref(true)
const dynamicSwitch = ref(false)

// 切换禁用状态
const toggleDisabled = () => {
  disabledSwitch.value = !disabledSwitch.value
}
</script>

<template>
  <div class="switch-demo-container">
    <SvgFilters />
    <div class="demo-header">
      <h1 class="demo-title">液态玻璃效果开关组件演示</h1>
      <p class="demo-description">
        这是一个基于Vue 3的滑动开关组件，应用了液态玻璃滤镜效果，支持多种配置和尺寸。
      </p>
    </div>

    <div class="demo-content">
      <!-- 基本用法 -->
      <section class="demo-section">
        <h2 class="section-title">基本用法</h2>
        <div class="demo-card">
          <div class="switch-item">
            <span class="switch-label">基础开关 (默认状态: {{ basicSwitch ? '开启' : '关闭' }})</span>
            <Switch v-model="basicSwitch" />
          </div>
          <div class="switch-item">
            <span class="switch-label">无图标开关 (默认状态: {{ withoutIcons ? '开启' : '关闭' }})</span>
            <Switch v-model="withoutIcons" :show-icons="false" />
          </div>
        </div>
      </section>

      <!-- 尺寸变体 -->
      <section class="demo-section">
        <h2 class="section-title">尺寸变体</h2>
        <div class="demo-card">
          <div class="switch-item">
            <span class="switch-label">小型开关</span>
            <div class="switch-wrapper" :class="'small'">
              <Switch v-model="smallSwitch" size="small" />
            </div>
          </div>
          <div class="switch-item">
            <span class="switch-label">中型开关 (默认)</span>
            <div class="switch-wrapper" :class="'medium'">
              <Switch v-model="basicSwitch" />
            </div>
          </div>
          <div class="switch-item">
            <span class="switch-label">大型开关</span>
            <div class="switch-wrapper" :class="'large'">
              <Switch v-model="largeSwitch" size="large" />
            </div>
          </div>
        </div>
      </section>

      <!-- 禁用状态 -->
      <section class="demo-section">
        <h2 class="section-title">禁用状态</h2>
        <div class="demo-card">
          <div class="switch-item">
            <span class="switch-label">禁用开关 (状态: {{ disabledSwitch ? '开启' : '关闭' }})</span>
            <Switch v-model="disabledSwitch" disabled />
          </div>
          <button class="control-button" @click="toggleDisabled">
            切换禁用状态
          </button>
        </div>
      </section>

      <!-- 动态配置 --<section class="demo-section">
        <h2 class="section-title">动态配置</h2>
        <div class="demo-card">
          <div class="config-controls">
            <div class="config-item">
              <label class="config-label">尺寸:</label>
              <select v-model="customSize" class="config-select">
                <option value="small">小型</option>
                <option value="medium">中型</option>
                <option value="large">大型</option>
              </select>
            </div>
            <div class="config-item">
              <label class="config-label">显示图标:</label>
              <Switch v-model="showIcons" size="small" />
            </div>
          </div>
          <div class="switch-item preview">
            <span class="switch-label">预览 (状态: {{ dynamicSwitch ? '开启' : '关闭' }})</span>
            <div class="switch-wrapper" :class="customSize">
              <Switch v-model="dynamicSwitch" :size="customSize" :show-icons="showIcons" />
            </div>
          </div>
        </div>
      </section>

      <!-- 代码示例 -->
      <section class="demo-section">
        <h2 class="section-title">代码示例</h2>
        <div class="demo-card">
          <h3 class="code-title">基本用法</h3>
          <pre class="code-block">
            <!-- HTML模板 -->
            <div>
              <Switch v-model="isSwitchOn" />
            </div>

            <!-- JavaScript -->
            import { ref } from 'vue'
            import SvgFilters from '@components/SvgFilters.vue'
            import Switch from '@components/Switch.vue'
            
            const isSwitchOn = ref(false)
          </pre>

          <h3 class="code-title">自定义配置</h3>
          <pre class="code-block">
            <!-- 自定义尺寸和无图标 -->
            <Switch v-model="customSwitch" size="large" :show-icons="false" />

            <!-- 禁用状态 -->
            <Switch v-model="disabledSwitch" disabled />
          </pre>
        </div>
      </section>
    </div>
  </div>
</template>

<style scoped>
.switch-demo-container {
  min-height: 100vh;
  padding: 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #333;
}

.demo-header {
  text-align: center;
  margin-bottom: 3rem;
  color: white;
}

.demo-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.demo-description {
  font-size: 1.1rem;
  max-width: 800px;
  margin: 0 auto;
  opacity: 0.9;
}

.demo-content {
  max-width: 1200px;
  margin: 0 auto;
}

.demo-section {
  margin-bottom: 3rem;
}

.section-title {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: white;
  text-align: center;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.demo-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.switch-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.switch-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.switch-label {
  font-size: 1rem;
  font-weight: 500;
  color: #333;
}

.control-button {
  background: #3B82F6;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 1rem;
}

.control-button:hover {
  background: #2563EB;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.config-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.config-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.config-label {
  font-weight: 500;
  color: #333;
  min-width: 80px;
}

.config-select {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
  background: white;
  cursor: pointer;
}

.code-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #333;
}

.code-block {
  background: #f8fafc;
  border-radius: 8px;
  padding: 1.5rem;
  overflow-x: auto;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #333;
  border: 1px solid #e2e8f0;
  margin-bottom: 1.5rem;
}

.code-block:last-child {
  margin-bottom: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .switch-demo-container {
    padding: 1rem;
  }
  
  .demo-title {
    font-size: 2rem;
  }
  
  .demo-card {
    padding: 1.5rem;
  }
  
  .switch-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .config-controls {
    grid-template-columns: 1fr;
  }
}

/* 深色主题适配 */
:global([data-theme="dark"]) .demo-card {
  background: rgba(31, 41, 55, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
}

:global([data-theme="dark"]) .switch-label,
:global([data-theme="dark"]) .config-label,
:global([data-theme="dark"]) .code-title {
  color: white;
}

:global([data-theme="dark"]) .code-block {
  background: #1e293b;
  border: 1px solid #334155;
  color: #e2e8f0;
}

:global([data-theme="dark"]) .config-select {
  background: #334155;
  border: 1px solid #475569;
  color: white;
}
</style>